<template>
	<div class="store-goods-manage">
    <!-- 搜索的背景色是白色 -->
    <div class="bgw">
      <!-- 搜索 -->
      <form class="form-inline">
        <div class="form-group mr36">
          <w-label :must="false">商品名称</w-label>
          <w-input class="input-inline" :validate="false" v-model="goodsName"></w-input>
        </div>
        <div class="form-group">
          <w-label :must="false">商品货号</w-label>
          <w-input class="input-inline" :validate="false" v-model="goodsSerial"></w-input>
        </div>
        <w-button type="main" @on-click="searchByParam">搜索</w-button>
      </form>
      <div class="form-inline pdl30">
        <div class="form-group">
          <w-checkbox label="page-all" v-model="pageAll" @on-change="selectPageAll">
            <span class="all">本页全选</span>
          </w-checkbox>
        </div>
        <div class="form-group">
          <w-checkbox label="goods-all" v-model="goodsAll" @on-change="selectAllGoods">
            <span class="all">全部全选</span>
          </w-checkbox>
        </div>
        <w-button type="main mal" v-if="status == 0" @on-click="underCarriage(1)">下架</w-button>
        <w-button type="main mal" v-if="status == 1" @on-click="underCarriage(-4)">上架</w-button>
        <w-button :type="leftClass" @on-click="deleteGoodsList">删除</w-button>
      </div>
    </div>
    <!-- 内容列表 -->
    <div class="store-goods-list">
      <w-table :columns="tabHeader">
        <!-- 商品列表 -->
        <tr v-for="(goods, index) in goodsList" v-bind:key="index">
          <td class="checked-width">
            <w-checkbox :label="goods.id" v-model="goods.checked" @on-change="setPageAllState"></w-checkbox>
          </td>
          <!-- 商品基本信息 -->
          <td class="goods">
            <img :src="goods.goodsMainPhotoPath" @click="goGoodsDetail(goods.id)">
            <p @click="goGoodsDetail(goods.id)">{{goods.goodsName}}</p>
          </td>
          <!-- 商品货号 -->
          <td>{{goods.goodsSerial}}</td>
          <!-- 商品类目 -->
          <td>
            <!-- <span v-if="goods.classNameThree != null && goods.classNameTwo != null && goods.classNameOne !=null" v-text="goods.classNameOne + '>' + goods.classNameTwo + '>' + goods.classNameThree"></span>             -->
            <span v-if="goods.gcName != null" v-text="goods.gcName"></span>
          </td>
          <td>{{goods.publishName}}</td>
          <!-- <td>{{goods.brandName}}</td> -->
          <!-- 下架原因 -->
          <td class="reason" v-if="status == -2">{{goods.underCarReson}}</td>
          <!-- 审核失败原因 -->
          <td class="reason" v-if="status == -7">{{goods.underCarReson}}</td>
          <!-- 操作 -->
          <td class="operate">
            <button type="button" v-if="goods.goodsStatus == -4" @click="cancelReview(goods)">取消审核</button>
            <button type="button" v-if="goods.goodsStatus != -4 && status != 0 || goods.goodsStatus == -6 || goods.goodsStatus == -7" @click="editGoods(goods.id, goods.gcId)">编辑</button>
            <button type="button" v-if="status == 0 && goods.goodsStatus != -4" @click="shelvesGoods(goods, 1)">下架</button>
            <button type="button" v-if="status == 1 && goods.goodsStatus != -4" @click="shelvesGoods(goods, -4, goods.goodsMainPhotoPath)">上架</button>
            <button type="button" v-if="status == -2 && goods.goodsStatus != -4" @click="shelvesGoods(goods, -4)">提交审核</button>
            <button type="button" @click="deleteGoods(goods)">删除</button>
          </td>
        </tr>
        <!-- 如果没有数据，则加载此提示消息 -->
        <tr v-if="goodsList.length == 0">
          <td colspan="7">暂时没有数据哟！</td>
        </tr>
      </w-table>
    </div>
    <!-- 分页 -->
    <w-paging v-show="totalPage > 1" :current="currentPage" :total="totalPage" @page="jumptToPage"></w-paging>
  </div>
</template>

<script>
  import { apiGoods, apiSendDataToRemote, apiDeleteDataToRemote, apiUpdateLucenceByDelete } from '../../../common/api'
  import { FONT_GOODS_DETAIL_URL } from 'js/config'
  import { mapGetters } from 'vuex'
  // 全局作用域
  import app from '../../../main'

  // 消息常量
  const MESSAGE = {
    TITLE: '确认',
    // 下架勾选的商品提醒
    UNDER_CARRIAGE_ALL_CONFIRM: '是否下架勾选的商品',
    // 下架勾选的商品成功消息
    UNDER_CARRIAGE_ALL_SUCCESS: '勾选的商品已经全部下架',
    // 下架勾选的商品提醒
    UNDER_CARRIAGE_ONE_CONFIRM: '是否下架该商品',
    // 下架勾选的商品成功消息
    UNDER_CARRIAGE_ONE_SUCCESS: '该商品已经下架',
    // 上架勾选的商品提醒
    GROUNDING_ALL_CONFIRM: '是否上架勾选的商品',
    // 上架勾选的商品成功消息
    GROUNDING_ALL_SUCCESS: '勾选的商品已经全部上架',
    // 上架勾选的商品等待审核
    GROUNDING_ALL_REVIEW: '商品等待审核中',
    // 上架勾选的商品提醒
    GROUNDING_ONE_CONFIRM: '是否上架该商品',
    // 上架勾选的商品成功消息
    GROUNDING_ONE_SUCCESS: '该商品已经上架',
    // 删除勾选的商品提示
    DELETE_GOODS_ALL_CONFIRM: '是否删除勾选的商品',
    // 删除勾选的商品成功信息
    DELETE_GOODS_ALL_SUCCESS: '勾选的商品已经全部删除',
    // 删除单个商品提示
    DELETE_GOODS_ONE_CONFIRM: '是否删除该商品',
    // 删除单个商品成功信息
    DELETE_GOODS_ONE_SUCCESS: '该商品已经删除',
    // 直接点击上架，但是没有选择商品
    SELECT_GOODS_UNDER_CARRIAGE: '请选择需要下架的商品',
    // 直接点击上架，但是没有选择商品
    SELECT_GOODS_GROUNDING: '请选择需要上架的商品',
    // 直接点击删除，但是没有选择商品
    SELECT_GOODS_DELETE: '请选择需要删除的商品'
  }

  export default {
    props: {
      status: {
        type: [String, Number],
        default: 1
      }
    },
    data() {
      return {
        // 商品名称
        goodsName: '',

        // 商品货号
        goodsSerial: '',

        // 第一次不展示分页组件
        showPage: false,

        // 当前页码
        currentPage: 1,

        // 总共多少页
        totalPage: 1,

        // 每页展示多少条数据
        showItem: 5,

        // 商品列表
        goodsList: [],

        // 整页全选
        pageAll: false,

        // 商品全选
        goodsAll: false,

        // 表格头
        columns1: [
          {title: ''},
          {title: '名称', width: '20%'},
          {title: '商品货号'},
          {title: '分类'},
          {title: '发布人'},
          // {title: '品牌'},
          {title: '操作'}
        ],
        // 表格头
        columns2: [
          {title: ''},
          {title: '名称', width: '20%'},
          {title: '商品货号'},
          {title: '分类'},
          {title: '发布人'},
          // {title: '品牌'},
          {title: '下架原因'},
          {title: '操作'}
        ],
        // 表格头
        columns3: [
          {title: ''},
          {title: '名称', width: '20%'},
          {title: '商品货号'},
          {title: '分类'},
          {title: '发布人'},
          {title: '原因'},
          {title: '操作'}
        ],
        tabHeader: []
      }
    },
    created() {
      this.handlerForSaleGoodsList()
    },
    mounted() {
      // 如果当前是违规下架
      if (this.status == -2) {
        this.tabHeader = this.columns2
        return
      } else if (this.status == -7) {
        this.tabHeader = this.columns3
        return
      }
      // 当前是其他类型的商品
      this.tabHeader = this.columns1
    },
    methods: {
      // 打开新窗口查看商品详情
      goGoodsDetail(goodsId) {
        window.open(`${FONT_GOODS_DETAIL_URL}` + goodsId)
      },
      /**
       * 处理销售中的商品详情
       */
      handlerForSaleGoodsList() {
        // 清除本页全选复选框
        this.pageAll = false

        // 查询出售中的商品
        apiGoods.queryGoodsList({
          storeId: this.storeId,
          goodsStatus: this.status,
          goodsName: this.goodsName,
          goodsSerial: this.goodsSerial,
          currentPage: this.currentPage,
          showCount: this.showItem
        }).then((data) => {
          // 如果返回的商品列表没有值
          if (!data.goodsList || data.goodsList.length == 0) {
            // 设置总页数是0，这样页面就不展示分页组件了
            this.totalPage = 0

            // 清空商品列表
            this.goodsList = []
            return
          }

          // 展示分页组件（防止第一次加载失败时出现分页组件）
          this.showPage = true

          // 记录当前的页码
          this.currentPage = Number(data.currentPage || '1')

          // 设置总页码
          this.totalPage = data.pageTotal

          // 赋值
          this.goodsList = data.goodsList

          // 给每个属性添加checked属性
          this.goodsList.forEach((v) => {
            this.$set(v, 'checked', this.goodsAll)
          })
        })
      },

      /**
       * 通过参数搜索
       */
      searchByParam() {
        // 设置当前页为第一页
        this.currentPage = 1

        // 不展示分页
        this.showPage = false

        // 加载数据
        this.handlerForSaleGoodsList()
      },

      /**
       * 设置本页全选按钮的状态
       */
      setPageAllState() {
        // 默认状态
        this.pageAll = true

        // 如果商品列表不存在，则直接抛出
        if (this.goodsList.length == 0) {
          return
        }

        // 如果商品列表中只要有一个是未选中状态，则全选按钮也为未选中状态
        this.goodsList.forEach((v) => {
          if (!v.checked) {
            this.pageAll = false
            this.goodsAll = false
          }
        })
      },

      /**
       * 设置所有数据全选
       */
      selectAllGoods() {
        // 选中本页的数据
        // 如果商品列表不存在，则直接抛出
        if (this.goodsList.length == 0) {
          return
        }

        // 如果当前是全部商品全选的，则将本页全选选中
        if (this.goodsAll) {
          this.pageAll = true
        } else {
          this.pageAll = false
        }

        // 将当前的商品列表的选中状态和页码的全选按钮一致
        this.goodsList.forEach((v) => {
          v.checked = (this.goodsAll || this.pageAll)
        })
      },

      /**
       * 跳转到制定页面
       *
       * @parma {Integer} page 当前页
       */
      jumptToPage(page = 1) {
        // 记录当前页
        this.currentPage = page

        // 请求数据
        this.handlerForSaleGoodsList()
      },

      /**
       * 选择当前页的全部商品
       */
      selectPageAll() {
        // 如果商品列表不存在，则直接抛出
        if (this.goodsList.length == 0) {
          return
        }

        // 将当前的商品列表的选中状态和页码的全选按钮一致
        this.goodsList.forEach((v) => {
          v.checked = this.pageAll
        })

        // 如果当前是全部商品全选的，则将本页全选选中
        if (!this.pageAll) {
          this.goodsAll = false
        }
      },

      /**
       * 编辑商品
       *
       * @param  {Object} goodsId 当前商品id
       */
      editGoods(goodsId, gcId) {
        this.$store.commit('clearAddGoodsInfo')
        setTimeout(() => {
          if (this.status == -1) {
            this.$router.push(`/goods/info/${gcId}?sketchid=${goodsId}`)
          } else {
            this.$router.push(`/goods/info/${gcId}?goodsid=${goodsId}`)
          }
        }, 500)
      },

      /**
       * 上、下架选中的商品
       *
       * @params { Number } type 当前是上架还是下架  -4：上架 1：下架
       */
      underCarriage(type) {
        // 如果当前是全部商品全选操作
        if (this.goodsAll) {
          // 弹出框确认
          this.$modal({
            title: MESSAGE.TITLE,
            // 按照类型提示消息
            content: (type == 1 ? MESSAGE.UNDER_CARRIAGE_ALL_CONFIRM : MESSAGE.GROUNDING_ALL_CONFIRM),
            onConfirm: () => {
              // 调用接口，将选中的商品全部下架
              apiGoods.goodsGroundUnderCar(type, '', this.storeId).then((data) => {
                this.currentPage = 1
                // 刷新一下列表
                this.handlerForSaleGoodsList()

                // 如果是下架，则展示如下信息
                if (type == 1) {
                  app.$toast(MESSAGE.UNDER_CARRIAGE_SUCCESS)
                  // this.setDeleteDataToRemote(undefined, this.storeId, 1, 0)
                  return
                }
                // 如果是上架，则展示如下信息
                app.$toast(MESSAGE.GROUNDING_ALL_REVIEW)
                this.setDataToRemote()
              })
            }
          })
          return
        }

        // 如果商品列表不存在，则直接抛出
        if (this.goodsList.length == 0) {
          return
        }

        // 商品id集合
        let goodsIds = []
        // // 商品主图集合
        let goodsMainPhotoPath = []

        // 将当前的商品列表的选中状态和页码的全选按钮一致
        this.goodsList.forEach((v) => {
          if (v.checked) {
            goodsIds.push(v.id)
            goodsMainPhotoPath.push(v.goodsMainPhotoPath)
          }
        })

        // 需要下架的商品集合
        if (goodsIds.length == 0) {
          // 如果当前是下架
          if (type == -4) {
            app.$toast(MESSAGE.SELECT_GOODS_GROUNDING)
            return
          }
          app.$toast(MESSAGE.SELECT_GOODS_UNDER_CARRIAGE)
          return
        }
        // 如果商品需要上架
        if (type == -4) {
          if (goodsMainPhotoPath && goodsMainPhotoPath.length > 0) {
            goodsMainPhotoPath.forEach(function(goodsMainPhoto, index) {
              if (goodsMainPhoto == null) {
                app.$toast('该商品信息不完善，无法上架，请先编辑')
                goodsMainPhotoPath = []
                return
              }
            })
          } else {
            app.$toast('该商品信息不完善，无法上架，请先编辑')
            return
          }
          if (goodsMainPhotoPath.length <= 0) {
            app.$toast('该商品信息不完善，无法上架，请先编辑')
            return
          }
        }
        // 弹出框确认
        this.$modal({
          title: MESSAGE.TITLE,
          content: (type == 1 ? MESSAGE.UNDER_CARRIAGE_ALL_CONFIRM : MESSAGE.GROUNDING_ALL_CONFIRM),
          onConfirm: () => {
            // 调用接口，将选中的商品全部下架
            apiGoods.goodsGroundUnderCar(type, goodsIds).then((data) => {
              // 将本页全选复选框设置为未选中
              this.goodsAll = false

              // 将全选复选框设置为未选中
              this.pageAll = false
              this.currentPage = 1

              // 刷新一下列表
              this.handlerForSaleGoodsList()

              // 如果当前是下架
              if (type == 1) {
                app.$toast(MESSAGE.UNDER_CARRIAGE_ALL_SUCCESS)
                // this.setDeleteDataToRemote(goodsIds, this.storeId, 1, 0)
                return
              }
              app.$toast(MESSAGE.GROUNDING_ALL_SUCCESS)
              this.setDataToRemote()
            })
          }
        })
      },

      /**
       * 上下架商品
       * @params  { Object } goods 当前操作的商品
       * @params  { Number } type  当前操作的类型 0：上架 -1：下架 -4：待审核
       */
      shelvesGoods(goods, type, key) {
        if (type == 0) {
          if (!key || key == null || key == undefined) {
            app.$toast('该商品信息不完善，无法上架，请先编辑')
            return
          }
        }
        // 弹出框确认
        this.$modal({
          title: MESSAGE.TITLE,
          content: (type == 1 ? MESSAGE.UNDER_CARRIAGE_ONE_CONFIRM : MESSAGE.GROUNDING_ONE_CONFIRM),
          onConfirm: () => {
            apiGoods.goodsGroundUnderCar(type, [goods.id]).then((data) => {
              this.currentPage = 1
              // 刷新一下列表
              this.handlerForSaleGoodsList()

              // 如果是下架
              if (type == 1) {
                app.$toast(MESSAGE.UNDER_CARRIAGE_ONE_SUCCESS)
                // this.setDeleteDataToRemote([goods.id], this.storeId, 1, 0)
                return
              }
              if (type == 0) {
                app.$toast(MESSAGE.GROUNDING_ONE_SUCCESS)
                this.setDataToRemote()
                return
              }
              if (type == -4) {
                app.$toast('以提交审核，请耐心等待')
              }
            })
          }
        })
      },

      /**
       * 批量删除商品
       */
      deleteGoodsList() {
        let data = {
          accessToken: this.$store.getters.token,
          storeId: this.storeId,
          goodsStatus: this.status
        }
        // 如果当前是全部商品全选操作
        if (this.goodsAll) {
          // 弹出框确认
          this.$modal({
            title: MESSAGE.TITLE,
            content: MESSAGE.DELETE_GOODS_ALL_CONFIRM,
            onConfirm: () => {
              // 调用接口，将选中的商品全部下架
              if (this.status == -1) {
                apiGoods.deleteSektch(this.token, [], this.storeId).then(data => {
                  // 将本页全选复选框设置为未选中
                  this.goodsAll = false
                  // 将全选复选框设置为未选中
                  this.pageAll = false
                  this.currentPage = 1
                  // 刷新一下列表
                  this.handlerForSaleGoodsList()
                  this.totalPage = 0
                })
              } else {
                apiGoods.deleteGoods('', '', data).then((data) => {
                  // 将本页全选复选框设置为未选中
                  this.goodsAll = false

                  // 将全选复选框设置为未选中
                  this.pageAll = false
                  this.currentPage = 1
                  // 刷新一下列表
                  this.handlerForSaleGoodsList()
                  this.totalPage = 0
                  // 提示消息
                  app.$toast(MESSAGE.DELETE_GOODS_ALL_SUCCESS)
                  // this.setDeleteDataToRemote(undefined, this.storeId, this.status, -1)
                })
              }
            }
          })
          return
        }

        // 如果商品列表不存在，则直接抛出
        if (this.goodsList.length == 0) {
          return
        }

        // 商品id集合
        let goodsIds = []

        // 将当前的商品列表的选中状态和页码的全选按钮一致
        this.goodsList.forEach((v) => {
          if (v.checked) {
            goodsIds.push(v.id)
          }
        })

        // 需要下架的商品集合
        if (goodsIds.length == 0) {
          app.$toast(MESSAGE.SELECT_GOODS_DELETE)
          return
        }
        // 弹出框确认
        this.$modal({
          title: MESSAGE.TITLE,
          content: MESSAGE.DELETE_GOODS_ALL_CONFIRM,
          onConfirm: () => {
            if (this.status == -1) {
              apiGoods.deleteSektch(this.token, goodsIds).then(data => {
                this.currentPage = 1
                this.handlerForSaleGoodsList()
              })
            } else {
              // 调用接口，将选中的商品全部下架
              apiGoods.deleteGoods(goodsIds, this.storeId).then((data) => {
                this.currentPage = 1
                // 刷新一下列表
                this.handlerForSaleGoodsList()
                app.$toast(MESSAGE.DELETE_GOODS_ALL_SUCCESS)
                // this.setDeleteDataToRemote(goodsIds, this.storeId, goodsStatus, -1)
              })
            }
          }
        })
      },
      /**
       * 取消审核
       */
      cancelReview(goods) {
        let params = {
          accessToken: this.token,
          goodsId: goods.id,
          goodsStatus: -6
        }
       apiGoods.updateStatus(params).then(data => {
         // 请求查询数据接口
         this.handlerForSaleGoodsList()
       })
      },
      /**
       * 删除单个商品
       * @param  {Object} goods 当前操作的商品
       */
      deleteGoods(goods) {
        // 弹出框确认
        this.$modal({
          title: MESSAGE.TITLE,
          content: MESSAGE.DELETE_GOODS_ONE_CONFIRM,
          onConfirm: () => {
            // 删除草稿箱
            if (this.status == -1) {
              apiGoods.deleteSektch(this.token, [goods.id]).then(data => {
                this.currentPage = 1
                this.handlerForSaleGoodsList()
              })
            } else { // 删除非草稿箱商品数据
              apiGoods.deleteGoods([goods.id], this.storeId).then((data) => {
                this.currentPage = 1
                // 刷新一下列表
                this.handlerForSaleGoodsList()
                app.$toast(MESSAGE.DELETE_GOODS_ONE_SUCCESS)
                // this.setDeleteDataToRemote([goods.id], this.storeId, this.status, -1)
              })
            }
          }
        })
      },
      /**
       * 一键将本店铺商品同步到好下单平台上
       */
      setDataToRemote() {
        // 同步商品
        apiSendDataToRemote({ searchType: 'goods' }).then((data) => {})
      },

      /**
       * 删除店铺的商品同步
       *
       * @param { Array }  ids      商品id的集合
       * @param { Number } storeId  商家id
       * @param { Number } status   商品状态
       */
      setDeleteDataToRemote(ids, storeId, status, deleteStatus) {
        // 同步商品
        apiDeleteDataToRemote({ deleteType: 'goods', ids: ids, storeId: storeId, goodsStatus: status, deleteStatus: deleteStatus }).then((data) => {
          apiUpdateLucenceByDelete(storeId).then(() => {})
        })
      }
    },
    computed: {
      ...mapGetters(['token', 'storeId']),
      leftClass() {
        return status != -2 ? 'main mal' : 'main mald'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .store-goods-manage {
    .bgw {
      background-color: white;
      padding: 20px 30px 0px 30px;
      // margin: -20px -30px 0px -30px;
      position: relative;
      z-index: 10;
    }

    .goods {
      cursor: pointer;
      p {
        margin: 0px;
        padding: 15px;
      }
    }

    .checked-width {
      width: 80px;
    }

    .all {
      margin-left:  18px;
    }

    .form-inline {
      margin: 20px 0;
    }

    .mal {
      margin-left: 18px;
      width: 72px;
    }

    .mald {
      margin-left: 38px;
      width: 72px;
    }

    .mr36 {
      margin-right: 36px;
    }

    .pdl30 {
      padding-left: 30px;
    }

    .input-inline {
      display: inline-block;
      margin-left: 14px;
      width: 194px;
    }

    .store-goods-list {
      margin-top: 30px;
    }

    .reason {
      color: #ff7e00;
    }
  }
</style>